/** 
 * 用户登录页面
 */

import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';

import { IAdminStore } from '@shared/types';
import { FormImageCaptcha } from '@shared/components/ImageCaptcha';
import { action } from 'mobx';
import { PageStore } from '@shared/store/PageStore';
import { Form, Col, Row, Button, withField, Space } from '@douyinfe/semi-ui';
import { observer } from 'mobx-react';
import { loginByUsername } from '@shared/services/account';
import LocaleSelector from '@admin/components/LocaleSelector';
import { lang } from '@admin/lang';

const SemiFormImageCaptcha = withField((props) => {
    return <FormImageCaptcha 
        {...props} 
        width={116}
        height={40} 
        style={{ marginTop: 23 }} />
});

type LoginFormValues = {
    username: string;
    password: string;
    // captcha: string;
    // captchaSessId: string;
};

class LoginStore extends PageStore<IAdminStore> {

    @action
    async doSubmit({ username, password/*, captcha, captchaSessId */}: LoginFormValues) {
        const token = await loginByUsername(username, password/*, captcha, captchaSessId*/);
        this.store.login(token);
    }
}

const Login = (): JSX.Element => {
    const [ viewStore ] = useState<LoginStore>(new LoginStore());
    const { loading } = viewStore;
    const history = useHistory();

    return (
        
        <div className="grid min-h-screen place-items-center">
            <div className="w-11/12 p-12 bg-white sm:w-8/12 md:w-1/2 lg:w-4/12 mb-16">
                <div>
                    <h2 className="mb-8 text-center text-3xl font-extrabold text-gray-900">
                    {lang('site_name')}
                    </h2>
                </div>
                <Form
                    initValues={{ username: '', password: '', captcha: '' }}
                    onSubmit={async (values) => {
                        await viewStore.submit(values);
                        history.push('/dashboard');
                    }}
                >
                    <Row>
                        <Col span={24}>
                            <Form.Input
                                size="large"
                                field="username"
                                label="用户名"
                                placeholder=""
                                validate={val => {
                                    return val ? '' : '请输入登录用户名';
                                }}
                                trigger="blur"
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <Form.Input
                                size="large"
                                field="password"
                                label="密 码"
                                placeholder=""
                                type="password"
                                validate={val => {
                                    return val ? '' : '请输入登录密码';
                                }}
                                trigger="blur"
                            />
                        </Col>
                    </Row>
                    <Row className="flex items-start">
                        <Col span={15}>
                            <Form.Input
                                size="large"
                                field="captcha"
                                label="验证码"
                                placeholder=""
                                validate={val => {
                                    return val ? '' : '请输入图形验证码';
                                }}
                                trigger="blur"
                            />
                        </Col>
                        <Col span={8} offset={1}>
                            <SemiFormImageCaptcha 
                                field="captchaSessId"
                                noLabel={true}
                            />
                        </Col>
                    </Row>

                    <Row className="mt-4">
                        <Col span={24}>
                            <Button
                                theme='solid' type="primary"
                                size="large"
                                block
                                loading={loading}
                                htmlType="submit"
                            >
                                登 录
                            </Button>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className="self-end py-6">
                <div className="text-center w-full text-sm">
                    <Space>
                        <div>选择语言</div>
                        <LocaleSelector position={'top'} />
                    </Space>
                </div>
            </div>
        </div>
    );
};

export default observer(Login);
